/** 
  修改成绩
*/
<template>
  <div class="apply-change-score-container">
    <div style="height: 40px;">
      <el-breadcrumb separator="/" class="float-left" style="padding-top: 8px;">
        <el-breadcrumb-item :to="{ path: '/studentPerformMaintain' }">
          <span @click="backToMain()">{{ $t('studentPerformMaintain.studentPerformMaintain') }}</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t('scoreMangementBase.change') }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="float-right">
        <el-button type="text" @click="backToMain()">{{ $t('common.btn.back') }}</el-button>
      </div>
    </div>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;">
      <div class="title">{{ $t('studentPerformMaintain.studentGradeInfo') }}</div>
      <div class="sub-container">
        <h3 class="sub-container-title">{{ $t('studentPerformMaintain.individualScoreInfo') }}</h3>
        <table class="table-style-baseinfos">
          <tbody>
             <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.studentId') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.studentId }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.studentName') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.studentName }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.college') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.facultyI18n }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.trainingLevel') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.trainingLevelI18n }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseNum') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseNum }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCode') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseCode }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseName') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.courseName }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.courseCategory') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.learnTypeI18n }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('courseScoreMana.postStatus') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.releaseTypeName }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.semester') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.calendarYearTermCn }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('gradeRelatedSetting.gradeRecordMethod') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.scoreRecordTypeI18n }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.credit') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.credit }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('gradeRelatedSetting.gradePoint') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.gradePoint }}</td>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.grade') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.scoreValue }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreMangementBase.isPass') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.isPassName }}</td>
              <td class="text-right-background-color">{{ $t('courseScoreMana.entryPerson') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importUser }}</td>
            </tr>
            <tr>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.entryTime') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importTime }}</td>
              <td class="text-right-background-color">{{ $t('scoreEntryMana.editTime') }}：</td>
              <td class="text-left-background-none">{{ basicInfo.importUpdatedTime }}</td>
            </tr>
          </tbody>
        </table>
        <h3 class="sub-container-title">{{ $t('scoreEntryMana.scoreList') }}</h3>
        <el-form :model="courseGradeInfoTable" ref="courseGradeInfoTable">
          <EduTable
            :order="false"
            :selection="false"
            :border="true"
            :pagination="false"
            :header-cell-style="{ background: '#EDF1F5' }"
            :data="courseGradeInfoTable.dataList">
            <edu-table-column min-width="100" align="center" prop="scoreTypeI18n" :label="$t('studentPerformMaintain.gradeType')"> </edu-table-column>
            <edu-table-column prop="scoreRecordTypeI18n" min-width="100" align="center" :label="$t('gradeRelatedSetting.gradeRecordMethod')"></edu-table-column>
            <edu-table-column prop="scoreExamType" min-width="100" align="center" :label="$t('scoreChangeApply.examNature')">
              <template slot-scope="scope">
                <!-- 考试性质 -->
                <el-form-item 
                  style="margin-top: 15px;" 
                  :prop="'dataList.' + scope.$index + '.scoreExamType'" 
                  label-width="0"
                  :rules="[{ required: true, message: $t('scoreChangeApply.requireExamNature'), trigger: 'change'}]">
                  <el-select v-model="scope.row.scoreExamType" @change="(value) => changeScoreExamType(value, scope.$index)" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                    <!-- 期末考试 -->
                    <div v-if="scope.row.scoreType === '11008'">
                      <el-option
                        v-for="item in options.examNature"
                        :key="item.key"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </div>
                    <!-- 平时成绩1 改为 过程性考核1，平时成绩2 改为 过程性考核2，期中成绩 改为 考勤 -->
                    <div v-else-if="scope.row.scoreType === '11005' || scope.row.scoreType === '11006' || scope.row.scoreType === '11007'">
                      <el-option
                        v-for="item in options.usualGradeList"
                        :key="item.key"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </div>
                    <!-- 重考成绩、缓考成绩 -->
                    <div v-else-if="scope.row.scoreType === '11003' || scope.row.scoreType === '11004'">
                      <el-option
                        v-for="item in options.redelayGradeList"
                        :key="item.key"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </div>
                  </el-select>
                </el-form-item>
              </template>
            </edu-table-column>
            <edu-table-column :label="$t('scoreEntryMana.percentage')" prop="scorePercent" min-width="80" align="center">
              <template slot-scope="scope">
               <span>{{ scope.row.scorePercent ? scope.row.scorePercent + '%' : '' }}</span>
              </template>
            </edu-table-column>
            <edu-table-column prop="score" min-width="60" :label="$t('scoreMangementBase.grade')" align="center">
              <template slot-scope="scope">
                <!-- 成绩 -->
                <el-form-item 
                  style="margin-top: 15px;" 
                  :prop="'dataList.' + scope.$index + '.score'" 
                  label-width="0"
                  :rules="[{ required: scope.row.scoreExamType === '14001', message: $t('scoreMangementBase.requireGrade'), trigger: 'change'}]">
                  <el-input v-if="scope.row.scoreRecordType === '1001'" @change="(value) => changeScore(value, scope.$index)" :disabled="scope.row.scoreExamType !== '14001'" v-model.trim="scope.row.score" :maxlength="32" clearable :placeholder="$t('common.pla.pleaseInput')"></el-input>
                  <el-select v-else v-model="scope.row.score" @change="(value) => changeScore(value, scope.$index)" :disabled="scope.row.scoreExamType !== '14001'" :placeholder="$t('common.pla.pleaseSelect')" clearable style="width: 100%;">
                    <!-- 两级制 -->
                    <div v-show="scope.row.scoreRecordType === '1003'">
                      <el-option
                        v-for="item in options.twoLevelList"
                        :key="item.gradeSetDetailsId"
                        :label="item.scoreName"
                        :value="item.gradeSetDetailsId">
                      </el-option>
                    </div>
                    <!-- 五级制 -->
                    <div v-show="scope.row.scoreRecordType === '1002'">
                      <el-option
                        v-for="item in options.fiveLevelList"
                        :key="item.gradeSetDetailsId"
                        :label="item.scoreName"
                        :value="item.gradeSetDetailsId">
                      </el-option>
                    </div>
                  </el-select>
                </el-form-item>
              </template>
            </edu-table-column>
            <edu-table-column prop="scoreChangeReason" min-width="150" :label="$t('scoreMangementBase.editReason')" align="center">
              <template slot-scope="scope">
                <!-- 修改原因 -->
                <el-form-item
                  :ref="'scoreChangeReason' + scope.$index"
                  style="margin-top: 15px;" 
                  :prop="'dataList.' + scope.$index + '.scoreChangeReason'" 
                  label-width="0"
                  :rules="[{ required: scope.row.requiredReason, message: $t('scoreMangementBase.requireEditReason'), trigger: 'blur'},{ validator: checkSpecial, trigger: 'blur'}]">
                  <el-input v-model.trim="scope.row.scoreChangeReason" :maxlength="32" clearable :placeholder="$t('common.pla.pleaseInput')"></el-input>
                </el-form-item>
              </template>
            </edu-table-column>
          </EduTable>
        </el-form>
        <div style="width: 100%;text-align: right;padding-top: 20px;">
          <el-button @click="cancel()">{{ $t('common.btn.cancel') }}</el-button>
          <el-button type="primary" @click="confirm()">{{ $t('common.btn.confirm') }}</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
import UTILS from "common/src/utils/utils";
import { queryDic } from "common/src/api/dictionary";
export default {
  components: {
  },
  data () {
    return {
      basicInfo: {},
      courseGradeInfoTable: {
        dataList: []
      },
      options: {
        examNature: [],
        usualGradeList: [],
        redelayGradeList: [],
        twoLevelList: [],
        fiveLevelList: [],
        hundredLevelList: [],
        allLevelList: []
      }
    }
  },
  props: {
    detailInfo: {
      type: Object,
      default: () => {}
    }
  },
  created() {

  },
  async mounted() {
    await this.initOptions()
    await this.getGradeRecordMethod()
    scoreManagementApi.queryCourseScoreInfoById(this.detailInfo).then(res => {
      if (res.code === 200) {
        this.basicInfo = res.data
        this.courseGradeInfoTable.dataList = JSON.parse(JSON.stringify(this.basicInfo.minorScoreDetailList))
        this.courseGradeInfoTable.dataList.map(value => {
          value['requiredReason'] = false
          // 百级制
          if (value.scoreRecordType === '1001') {
            value.score = value.scoreValue
          } else {
            value.score = value.score ? parseInt(value.score) : ''
          }
        })
      }
    })
  },
  methods: {
    // 校验特殊字符$
    checkSpecial(rule, value, callback) {
      let regEn = /[`$]/im;
      if (regEn.test(value)) {
        callback(new Error(this.$t('graduateBase.specialText')))
      } else {
        callback();
      }
    },
    async initOptions() {
      // 筛选条件字典查询
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: [
          "X_YXCK_FX" // 辅修允许重考的考试情况
        ]
      }
      let resp = await queryDic(data)
      if (resp.code === 200) {
        UTILS.fillSelect(
          {
            examNature: "X_YXCK_FX" // 辅修允许重考的考试情况
          },
          resp.data,
          this.options
        )
        // 正常+违纪
        this.options.usualGradeList = this.options.examNature.filter(value => {
          return value.value === '14001' || value.value === '14004'
        })
        // 正常+无资格+违纪+旷考
        this.options.redelayGradeList = this.options.examNature.filter(value => {
          return value.value !== '14002'
        })
      }
    },
    // 获取成绩记录方式
    async getGradeRecordMethod() {
      let resp = await scoreManagementApi.getScoreRecordMethodList({
        "gradeNameCn": "",
        "pageNum_": 1,
        "pageSize_": 20
      })
      if (resp.code === 200) {
        let recordTypeList = []
        if (resp.data.list.length > 0) {
          resp.data.list.forEach(value => {
            // 两级制
            if (value.gradeNameCode === '1003') {
              this.options.twoLevelList = value.minorGradeRelatedSetDetailsList
            } else if (value.gradeNameCode === '1002') { // 五级制
              this.options.fiveLevelList = value.minorGradeRelatedSetDetailsList
            } else if (value.gradeNameCode === '1001') { // 百分制
              this.options.hundredLevelList = value.minorGradeRelatedSetDetailsList
            }
          })
          this.options.allLevelList = [].concat(this.options.twoLevelList, this.options.fiveLevelList, this.options.hundredLevelList)
        }
      }
    },
    // 修改考试性质
    changeScoreExamType(val, index) {
      let originScoreExamType = this.basicInfo.minorScoreDetailList[index].scoreExamType
      // 当修改了考试性质
      this.$set(this.courseGradeInfoTable.dataList[index], 'requiredReason', val !== originScoreExamType)
      this.$refs['scoreChangeReason' + index].clearValidate()
      // 当考试性质为非正常
      if (val !== '14001') {
        this.$set(this.courseGradeInfoTable.dataList[index], 'score', '')
      }
    },
    // 修改考试成绩
    changeScore(val, index) {
      let currentVal = val.toString()
      let originScore = this.basicInfo.minorScoreDetailList[index].score
      // 当修改了考试性质
      this.$set(this.courseGradeInfoTable.dataList[index], 'requiredReason', currentVal !== originScore)
      this.$refs['scoreChangeReason' + index].clearValidate()
    },
    // 返回主页
    backToMain() {
      this.$emit('refresh-main-page')
    },
    // 取消
    cancel() {
      this.$confirm(this.$t('scoreMangementBase.cancelTip'), this.$t('scoreMangementBase.prompt'), {
        confirmButtonText: this.$t('scoreMangementBase.confirm'),
        cancelButtonText: this.$t('scoreMangementBase.cancel'),
        type: 'warning'
      }).then(() => {
        this.$emit('refresh-main-page')
      })
    },
    // 确定
    confirm() {
      let minorScoreDetailList = []
      this.courseGradeInfoTable.dataList.map(value => {
        minorScoreDetailList.push({
          "id": value.id,
          "scoreType": value.scoreType,
          "scoreRecordType": value.scoreRecordType,
          "scorePercent": value.scorePercent,
          "scoreExamType": value.scoreExamType,
          "score": value.scoreRecordType === '1001' ? '' : value.score,
          "scoreValue": value.score === '' ? '' : (value.scoreRecordType === '1001' ? value.score : UTILS.translateLabel(this.options.allLevelList, parseInt(value.score), 'gradeSetDetailsId', 'scoreName')),
          "scoreChangeReason": value.scoreChangeReason
        })
      })
      let params = {
        "id": this.detailInfo.id,
        "scoreRecordType": this.basicInfo.scoreRecordType,
        "minorScoreDetailList": minorScoreDetailList
      }
      console.log(params)
      this.$refs['courseGradeInfoTable'].validate((valid) => {
        if (valid) {
          let minorScoreDetailList = []
          this.courseGradeInfoTable.dataList.map(value => {
            minorScoreDetailList.push({
              "id": value.id,
              "scoreType": value.scoreType,
              "scoreRecordType": value.scoreRecordType,
              "scorePercent": value.scorePercent,
              "scoreExamType": value.scoreExamType,
              "score": value.scoreRecordType === '1001' ? '' : value.score,
              "scoreValue": value.score === '' ? '' : (value.scoreRecordType === '1001' ? value.score : UTILS.translateLabel(this.options.allLevelList, parseInt(value.score), 'gradeSetDetailsId', 'scoreName')),
              "scoreChangeReason": value.scoreChangeReason
            })
          })
          let params = {
            "id": this.detailInfo.id,
            "scoreRecordType": this.basicInfo.scoreRecordType,
            "minorScoreDetailList": minorScoreDetailList
          }
          console.log(params)
          scoreManagementApi.updateStudentGradeMaintain(params).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('scoreMangementBase.changeSuccessfully'))
              this.$emit('refresh-main-page')
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .apply-change-score-container ::v-deep {
    .title {
      margin-bottom: 20px;
      font-weight: bold;
      font-size: 18px;
    }
    .table-style-baseinfos {
      border-collapse: collapse;
      table-layout: fixed;
      word-break: break-all;
      background-color: rgba(210, 212, 214, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      width: 100%;
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #8896a7;
      margin-bottom: 20px;
    }
    .table-style-baseinfos .text-right-background-color {
      background-color: #edf1f5;
      text-align: right;
    }
    .text-left-background-none {
      text-align: left;
    }
    .table-style-baseinfos td {
      width: 25%;
      background-color: rgba(255, 255, 255, 1);
      border-width: 0.5px;
      border-style: solid;
      border-color: rgba(210, 212, 214, 1);
      font-weight: 401;
      font-style: normal;
      font-size: 14px;
      color: #2b3b4e;
      height: 32px;
      padding: 0 10px;
    }
    .sub-container {
      padding: 0 20px;
      .sub-container-title {
        margin-bottom: 20px;
        font-size: 16px;
      }
    }
  
  }
</style>